/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

$uni-nothing-text: #999; //空白页文字

$theme-color:#E93323;
$theme-color-opacity:rgba(233,51,35,.6);
$bg-star: #f62c2c;
$bg-end:#f96e29;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24upx;
$uni-font-size-base:28upx;
$uni-font-size-lg:32upx;

/* 图片尺寸 */
$uni-img-size-sm:40upx;
$uni-img-size-base:52upx;
$uni-img-size-lg:80upx;

/* Border Radius */
$uni-border-radius-sm: 4upx;
$uni-border-radius-base: 6upx;
$uni-border-radius-lg: 12upx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20upx;
$uni-spacing-row-lg: 30upx;

/* 垂直间距 */
$uni-spacing-col-sm: 8upx;
$uni-spacing-col-base: 16upx;
$uni-spacing-col-lg: 24upx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40upx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36upx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30upx;


// begin by cmh

// -------------------------------------------------------------------------
// my css
// -------------------------------------------------------------------------

$my-page-bkg-color: #F1F1F1;

.my-container {
	height: 100%; 
	weight: 100%; 
	display: flex;
	justify-content: center;
	align-items: center;
}

.my-container-x { 
	@extend .my-container;
}

.my-container-y {
	@extend .my-container;
	flex-direction: column; // flex-direction: row-从左到右排(默认值), column-从上到下
}

.my-card {
	width: 100%;
	margin: 0 16px;
	background: #fff;
	border: 1rpx solid $my-page-bkg-color;
	border-radius: 20rpx;
}

.my-row {
	display: flex;
	padding: 40rpx 20rpx;
	justify-content: center;
	align-items: center;
}

.my-line {
	height: 1rpx;
	border-bottom: 1rpx solid $my-page-bkg-color;
}

.my-label {
	width:100rpx;
	margin-right: 20rpx;
	text-align: right;
}

.my-label1 {
	@extend .my-label;
	width:120rpx;
}

.my-label2 {
	@extend .my-label;
	width:140rpx;
}

.my-label3 {
	@extend .my-label;
	width:160rpx;
}

.my-value {
	flex: 1;
	text-align: center;
}

.my-btn {
	height: 86rpx;
	border-radius: 20rpx;
	margin-right: 30rpx;
	margin-left: 30rpx;
	background-color: #E93323;
	font-size: 30rpx;
	line-height: 86rpx;
	color: #FFFFFF;
}

.my-btn-primary {
	@extend .my-btn;
	width: 100%;
}

.my-space-w1 { width: 10rpx; }
.my-space-w2 { width: 20rpx; }
.my-space-w3 { width: 30rpx; }
.my-space-w4 { width: 40rpx; }
.my-space-w5 { width: 50rpx; }
.my-space-h1 { height: 10rpx; }
.my-space-h2 { height: 20rpx; }
.my-space-h3 { height: 30rpx; }
.my-space-h4 { height: 40rpx; }
.my-space-h5 { height: 50rpx; }

.my-label-group {
	display: flex;
	background-color: #fff;
	border-radius: 6rpx;
	height: 140rpx;
	align-items: center;

	.item {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #aaa;
		border-left: 1px solid #eee;
		
		.num {
			margin-top: 10rpx;
			font-size: 36rpx;
			color: #282828;
		}
	}
}

// begin 单选和多选按钮
.my-sel-btn-grp {
	display: flex;
}
.my-sel-btn { // 未选中状态（普通状态）
  border: 1px solid #bbb;
  font-size: 26rpx;
  color: #282828;
  padding: 7rpx 20rpx;
  border-radius: 6rpx;
  margin: 8rpx 8rpx;
}
.my-sel-btn.on {
  color: #fff;
  background-color: #ff3700;
  border-color: #ff3700;
}
// end 单选和多选按钮


// -------------------------------------------------------------------------
// 颜色定义（摘自ColorUI）
// -------------------------------------------------------------------------
// --red: #e54d42;
// --orange: #f37b1d;
// --yellow: #fbbd08;
// --olive: #8dc63f;
// --green: #39b54a;
// --cyan: #1cbbb4;
// --blue: #0081ff;
// --purple: #6739b6;
// --mauve: #9c26b0;
// --pink: #e03997;
// --brown: #a5673f;
// --grey: #8799a3;
// --black: #333333;
// --darkGray: #666666;
// --gray: #aaaaaa;
// --ghostWhite: #f1f1f1;
// --white: #ffffff;
// /* 浅色 */
// --redLight: #fadbd9;
// --orangeLight: #fde6d2;
// --yellowLight: #fef2ce;
// --oliveLight: #e8f4d9;
// --greenLight: #d7f0db;
// --cyanLight: #d2f1f0;
// --blueLight: #cce6ff;
// --purpleLight: #e1d7f0;
// --mauveLight: #ebd4ef;
// --pinkLight: #f9d7ea;
// --brownLight: #ede1d9;
// --greyLight: #e7ebed;
// /* 渐变色 */
// --gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
// --gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
// --gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
// --gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
// --gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
// --gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
// /* 阴影透明色 */
// --ShadowSize: 6rpx 6rpx 8rpx;
// --redShadow: rgba(204, 69, 59, 0.2);
// --orangeShadow: rgba(217, 109, 26, 0.2);
// --yellowShadow: rgba(224, 170, 7, 0.2);
// --oliveShadow: rgba(124, 173, 55, 0.2);
// --greenShadow: rgba(48, 156, 63, 0.2);
// --cyanShadow: rgba(28, 187, 180, 0.2);
// --blueShadow: rgba(0, 102, 204, 0.2);
// --purpleShadow: rgba(88, 48, 156, 0.2);
// --mauveShadow: rgba(133, 33, 150, 0.2);
// --pinkShadow: rgba(199, 50, 134, 0.2);
// --brownShadow: rgba(140, 88, 53, 0.2);
// --greyShadow: rgba(114, 130, 138, 0.2);
// --grayShadow: rgba(114, 130, 138, 0.2);
// --blackShadow: rgba(26, 26, 26, 0.2);


// -------------------------------------------------------------------------
// 背景色和前景色（摘自ColorUI）
// -------------------------------------------------------------------------
.bg-grey {
	background-color: #8799a3;
	color: #ffffff;
}

.line-grey {
	color: #8799a3;
}

.line-grey::after {
	border-color: #8799a3;
}

// .bg-gray {
// 	background-color: #f0f0f0;
// 	color: #333333;
// }

// .line-gray {
// 	color: #aaaaaa;
// }

// .line-gray::after {
// 	border-color: #aaaaaa;
// }

.bg-orange {
	background-color: #f37b1d;
	color: #ffffff;
}

.line-orange {
	color: #f37b1d;
}

.line-orange::after {
	border-color: #f37b1d;
}


// -------------------------------------------------------------------------
// 徽章 && 胶囊按钮（摘自ColorUI）
// -------------------------------------------------------------------------
.cu-tag {
	font-size: 24rpx;
	vertical-align: middle;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0rpx 16rpx;
	height: 48rpx;
	font-family: Helvetica Neue, Helvetica, sans-serif;
	white-space: nowrap;
}

.cu-tag:not([class*="bg"]):not([class*="line"]) {
	background-color: var(--ghostWhite);
}

.cu-tag[class*="line-"]::after {
	content: " ";
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	border: 1rpx solid currentColor;
	transform: scale(0.5);
	transform-origin: 0 0;
	box-sizing: border-box;
	border-radius: inherit;
	z-index: 1;
	pointer-events: none;
}

.cu-tag.radius[class*="line"]::after {
	border-radius: 12rpx;
}

.cu-tag.round[class*="line"]::after {
	border-radius: 1000rpx;
}

.cu-tag[class*="line-"]::after {
	border-radius: 0;
}

.cu-tag+.cu-tag {
	margin-left: 10rpx;
}

.cu-tag.sm {
	font-size: 20rpx;
	padding: 0rpx 12rpx;
	height: 32rpx;
}

.cu-tag.big {
	font-size: 28rpx;
	height: 64rpx;
}

.cu-capsule {
	display: inline-flex;
	vertical-align: middle;
}

// .cu-capsule+.cu-capsule {
// 	margin-left: 10rpx;
// }

.cu-capsule .cu-tag {
	margin: 0;
}

.cu-capsule .cu-tag[class*="line-"]:last-child::after {
	border-left: 0rpx solid transparent;
}

.cu-capsule .cu-tag[class*="line-"]:first-child::after {
	border-right: 0rpx solid transparent;
}

.cu-capsule.radius .cu-tag:first-child {
	border-top-left-radius: 6rpx;
	border-bottom-left-radius: 6rpx;
}

.cu-capsule.radius .cu-tag:last-child::after,
.cu-capsule.radius .cu-tag[class*="line-"] {
	border-top-right-radius: 12rpx;
	border-bottom-right-radius: 12rpx;
}

.cu-capsule.round .cu-tag:first-child {
	border-top-left-radius: 200rpx;
	border-bottom-left-radius: 200rpx;
	text-indent: 4rpx;
}

.cu-capsule.round .cu-tag:last-child::after,
.cu-capsule.round .cu-tag:last-child {
	border-top-right-radius: 200rpx;
	border-bottom-right-radius: 200rpx;
	text-indent: -4rpx;
}

.cu-tag.badge {
	border-radius: 200rpx;
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	font-size: 20rpx;
	padding: 0rpx 10rpx;
	height: 28rpx;
	color: var(--white);
}

.cu-tag.badge:not([class*="bg-"]) {
	background-color: #dd514c;
}

.cu-tag:empty:not([class*="cuIcon-"]) {
	padding: 0rpx;
	width: 16rpx;
	height: 16rpx;
	top: -4rpx;
	right: -4rpx;
}

.cu-tag[class*="cuIcon-"] {
	width: 32rpx;
	height: 32rpx;
	top: -4rpx;
	right: -4rpx;
}


// -------------------------------------------------------------------------
// 模态窗口（摘自ColorUI）
// -------------------------------------------------------------------------
.cu-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1110;
	opacity: 0;
	outline: 0;
	text-align: center;
	-ms-transform: scale(1.185);
	transform: scale(1.185);
	backface-visibility: hidden;
	perspective: 2000upx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
}

.cu-modal::before {
	content: "\200B";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.cu-modal.show {
	opacity: 1;
	transition-duration: 0.3s;
	-ms-transform: scale(1);
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}

.cu-dialog {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 680upx;
	max-width: 100%;
	background-color: #f8f8f8;
	border-radius: 10upx;
	overflow: hidden;
}

.cu-modal.bottom-modal::before {
	vertical-align: bottom;
}

.cu-modal.bottom-modal .cu-dialog {
	width: 100%;
	border-radius: 0;
}

.cu-modal.bottom-modal {
	margin-bottom: -1000upx;
}

.cu-modal.bottom-modal.show {
	margin-bottom: 0;
}

.cu-modal.drawer-modal {
	transform: scale(1);
	display: flex;
}

.cu-modal.drawer-modal .cu-dialog {
	height: 100%;
	min-width: 200upx;
	border-radius: 0;
	margin: initial;
	transition-duration: 0.3s;
}

.cu-modal.drawer-modal.justify-start .cu-dialog {
	transform: translateX(-100%);
}

.cu-modal.drawer-modal.justify-end .cu-dialog {
	transform: translateX(100%);
}

.cu-modal.drawer-modal.show .cu-dialog {
	transform: translateX(0%);
}
.cu-modal .cu-dialog>.cu-bar:first-child .action{
  min-width: 100rpx;
  margin-right: 0;
  min-height: 100rpx;
}

// end